<template>
	<Layout>
		<Form ref="queryForm" :label-width="120" :loading="pageStatus.baseLoading">
			<Row class="query-form">
				<Col span="8">
				<!-- <FormItem label="年份：" prop="year" >
                	  <div v-if="mode === 'view'">{{dataToQuery.year}}</div>
                	  <DatePicker v-else class="w" placeholder="请选择年份" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                  </FormItem> -->
				<FormItem label='年份：' prop='year'>
					<DatePicker class="query-form-el" placeholder="请选择年份" v-model='dataToQuery.yearDate' type="year">
					</DatePicker>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem>
				</FormItem>
				</Col>
				<Col span="6">
				<Button @click="reset" class="ivu-btn-reset">重置</Button>
				<Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
				<Col span="2">
				<Button type="primary" icon="md-cloud-download" :loading="exportLoading" class="ivu-btn-query" @click="exportData">导出</Button>
				</Col>
			</Row>
		</Form>
		<Row :gutter="10" style=" margin-top: 15px;">
			<Col span="24">
			<Card dis-hover>
				<!-- <p>历年报考、通过人数趋势统计</p> -->
				<div ref="echarts1" style="height: 300px;"></div>
			</Card>
			</Col>
		</Row>
		<Table ref='table' :maxHeight="500" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!"
			@on-selection-change='getSelectRows' :loading='pageStatus.loading || pageStatus.baseLoading' border
			:columns="columns1" :data="dataTable">
		</Table>
		<!-- <Row style="margin-right:10px;">
			<Col span="24">
			<Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
				@on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
				show-elevator />
			</Col>
		</Row> -->
	</Layout>
</template>

<script>
	import { Api } from '@/api/index.js'
	import { sessionStorage } from '@/common/cacheUtils.js';
	import echarts from 'echarts'
	import { formatDate, createFormAndSubmit } from '@/tools/index'
	import _deepclone from 'lodash/cloneDeep'
	var cascaderDom = () => import('@/components/cascader-dom.vue');
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	export default {
		components: {
			cascaderDom
		},
		data() {
			return {
				...this.createCommonDataField(),
				columns1: [
					// {
					// 	title: "序号",
					// 	width: 80,
					// 	align: "center",
					// 	fixed: 'left',
					// 	type: 'index'
					// },
					{
						minWidth: 200,
						title: '单位名称',
						align: 'center',
						fixed: 'left',
						key: 'orgName',
					},
					{
						minWidth: 100,
						title: '参加或通过考试年份',
						align: 'center',
						fixed: 'left',
						key: 'year',
					},
					{
						minWidth: 80,
						title: '报考人数',
						align: 'center',
						key: 'subjectSum',
					},
					{
						minWidth: 80,
						title: '通过人数',
						align: 'center',
						key: 'validSum',
					},
					{
						minWidth: 100,
						title: '通过率',
						align: 'center',
						key: 'passRade',
					},
					// {
					// 	minWidth: 100,
					// 	title: '通过率',
					// 	align: 'center',
					// 	key: 'validSum',
					// 	render: (h, params) =>{return h('span', params.row.validSum==0?0:this.NumberDiv(this.NumberMul(params.row.validSum,100),params.row.subjectSum,2)+'%')}
					// },
					{
						minWidth: 150,
						title: '报考科目',
						align: 'center',
						children: [{
							title: '法律法规',
							key: 'lawsPoliciesSubjectSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '管理知识',
							key: 'managementSubjectSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '安全技术',
							key: 'securityTechSubjectSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '案例分析',
							key: 'caseAnalysisSubjectSum',
							align: 'center',
							minWidth: 90
						}]
					},
					{
						minWidth: 150,
						title: '通过情况',
						align: 'center',
						children: [{
							title: '法律法规',
							key: 'lawsPoliciesStatusSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '管理知识',
							key: 'managementStatusSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '安全技术',
							key: 'securityTechStatusSum',
							align: 'center',
							minWidth: 90
						}, {
							title: '案例分析',
							key: 'caseAnalysisStatusSum',
							align: 'center',
							minWidth: 90
						}]
					},
					{
						minWidth: 80,
						title: '有效期内通过科数',
						align: 'center',
						key: 'countAsValidSum',
					}
				],
				tableHeight: 10,
				queryUrl: Api.engineerStatistics,
			}
		},
		async mounted() {
			// this.setTableHeight();
			this.query();
		},
		methods: {
			...pageCommonFunction,
			exportData(){
				this.$refs.table.exportCsv({
						filename: '注册安全工程师统计'
				});
			},
			query() {
				if (!this.dataToQuery.yearDate) {
					this.dataToQuery.yearDate = new Date();
				}
				if (this.dataToQuery.yearDate) {
					this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
				}
				this.pageStatus.loading = true
				let data = {
				    startPage: this.pagedata.currentPage,
				    size: this.pagedata.pageSize,
				    conditions: this.dataToQuery
				};
				
				let barChart = echarts.init(this.$refs.echarts1);
				
				this.$http.post(this.queryUrl, data).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
						let map = res.data.data
				    this.dataTable = map.data;
						
						let barOption = this.getOption(map.tooltipTitle)
						barOption.series = map.monthList
						barOption.xAxis[0].data = map.xAxisData
						barChart.setOption(barOption);
						window.onresize = barChart.resize;
						
				    this.pageStatus.loading = false
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				    this.pageStatus.loading = false
				})
			},
			getOption(tooltipTitle) {
				let option = {
					title: {
						// text: '集团历年事故伤害程度人数统计',
						textStyle: {
							fontSize: 14
						}
					},
					tooltip: { //提示框组件
						trigger: 'axis',
						formatter(params) {
							return tooltipTitle[params[0].name] 
						},
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: { //图例组件
						// right: 10,
						// data: ['轻伤人数', '重伤人数', '死亡人数']
					},
					color: ['#40C4FF', '#FDD835'],
					grid: {
						left: '3%',
						right: '3%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						data: [], //动态
						axisLabel: {
						  interval: 0,
						  formatter: function (value) {
						    var str = "";
						    var num = 6; //每行显示字数
						    var valLength = value.length; //该项x轴字数
						    var rowNum = Math.ceil(valLength / num); // 行数
						    if (rowNum > 1) {
						      for (var i = 0; i < rowNum; i++) {
						        var temp = "";
						        var start = i * num;
						        var end = start + num;
						        temp = value.substring(start, end) + "\n";
						        str += temp;
						      }
						      return str;
						    } else {
						      return value;
						    }
						  }
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [
						{
							name: '2021年轻伤人数',
							type: 'bar',
							stack: '轻伤人数',
							emphasis: {
								focus: 'series'
							},
							data: []
						},
					]
				};
				return option;
			},
			
		}
	}
</script>

<style lang='css' scoped>
	@import '../../../index.css';
</style>
